<div class="form-group clearfix">
  <div class="pull-left form-inline">
    <span style="font-size: 16px;">用户关键词</span>
  </div>
</div>

<div>
  <nz-spin [nzTip]="'正在读取用户关键词列表...'" [nzSpinning]="_isSpinning" [nzSize]="'large'" class="admin-spin">
    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>用户搜索关键词</th>
        <th>点击数</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of keywordList;">
        <td>{{item.id}}</td>
        <td style="width:500px;word-break:break-all;">{{item.hot_key_name}}</td>
        <td>{{item.count}}</td>
        <td>{{item.created_at}}</td>
        <td>
          <a href="javascript:;" *ngIf="canVisit" (click)="showConfirmModal(item.hot_key_name,item.id)">添加到关键词</a>
        </td>
      </tr>
      </tbody>
    </table>
  </nz-spin>
  <div class="text-center">
    <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="pageSize"
                [(ngModel)]="page"
                [maxSize]="10"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                [boundaryLinks]="true" class="pagination-sm"></pagination>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow"
                  (promptIsShow)="isShow = $event;"></app-notification>


<div class="modal fade" bsModal #confirmModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-xs">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">添加关键词</h4>
        <button type="button" class="close pull-right" aria-label="Close"
                (click)="confirmModal.hide();">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group clearfix">
          <label class="col-md-2">关键词分类:</label>
          <div class="col-md-8">
            <select class="form-control" name="" id="" [(ngModel)]="keyCategory" (ngModelChange)="console($event)">
              <option value="1">任务关键词</option>
              <option value="2">热门关键词</option>
            </select>
          </div>
        </div>
        <div class="text-center mt20">
          <button class="btn btn-default btn-md-long" type="button"
                  (click)="confirmModal.hide();keyCategory = '1';">取 消
          </button>
          <button class="btn btn-success btn-md-long" type="button"
                  (click)="keyCategory == '1' ? addTaskKeyWord() : addHotKeyWord();">确 定
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
